<template>
  <div class="app-container customer-div" style="overflow-x: auto">
     <div style="min-width: 1200px">
       <el-card class="box-card"  shadow="never">
         <div slot="header" class="clearfix" >
           <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="changeTab">
             <el-menu-item index="1">客户持有天数分析</el-menu-item>
             <el-menu-item index="2">客户产品线分析</el-menu-item>
             <el-menu-item index="3">客户跟进分析</el-menu-item>
             <el-menu-item index="4">客户跟进明细</el-menu-item>
           </el-menu>
         </div>
         <div class="analys-con" v-show="tab == 1">

             <el-card class="box-card" >
               <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="selectTab">
                 <el-menu-item index="my">我负责的</el-menu-item>
                 <el-menu-item index="share">共享（师徒）</el-menu-item>
                 <el-menu-item index="department">部门（军团）</el-menu-item>
                 <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
               </el-menu>

               <el-form :inline="true" :model="listQuery" size="mini" label-width="50px" style="margin-top:20px;"  v-if="listQuery.tab != 'my'">
                 <el-form-item label="业务员：" label-width="70px">
                   <el-select style="width:100px" v-model="listQuery.userId" filterable clearable>
                     <el-option
                       v-for="item in userOptionList"
                       :key="item.userId"
                       :label="item.userName"
                       :value="item.userId">
                     </el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label-width="0px">
                   <el-button
                     @click="handleSearchList()"
                     type="primary">
                     查询
                   </el-button>
                 </el-form-item>
               </el-form>

               <!--数据列表-->
               <div class="table-container">
                 <el-table
                   ref="multipleTable"
                   v-loading="listLoading"
                   :data="tableData"
                   border
                   style="width: 100%; margin-top: 20px">
                   <el-table-column align="center" label="业务员" min-width="100">
                     <template slot-scope="scope">
                          {{scope.row.userName}}
                     </template>
                   </el-table-column>
                   <el-table-column label="客户总量" align="center" min-width="100">
                     <template slot-scope="scope">
                          {{scope.row.goodsLineNum}}
                     </template>
                   </el-table-column>
                   <el-table-column min-width="100" label="平均持有天数" align="center">
                     <template slot-scope="scope">
                          {{scope.row.averageDaysNum}}
                     </template>
                   </el-table-column>
                   <el-table-column  label="持有<30天" align="center">
                     <el-table-column min-width="100" label="数量" align="center">
                       <template slot-scope="scope">
                         {{scope.row.thirtyDaysNum}}
                       </template>
                     </el-table-column>
                     <el-table-column min-width="100" label="占比" align="center">
                       <template slot-scope="scope">
                         {{scope.row.thirtyDaysPercent}}
                       </template>
                     </el-table-column>
                   </el-table-column>

                   <el-table-column  label="持有30到90天" align="center">
                     <el-table-column min-width="100" label="数量" align="center">
                       <template slot-scope="scope">
                         {{scope.row.ninetyDaysNum}}
                       </template>
                     </el-table-column>
                     <el-table-column min-width="100" label="占比" align="center">
                       <template slot-scope="scope">
                         {{scope.row.ninetyDaysPercent}}
                       </template>
                     </el-table-column>
                   </el-table-column>

                   <el-table-column  label="持有90到180天" align="center">
                     <el-table-column min-width="100" label="数量" align="center">
                       <template slot-scope="scope">
                         {{scope.row.ninetyMoreDaysNum}}
                       </template>
                     </el-table-column>
                     <el-table-column min-width="100" label="占比" align="center">
                       <template slot-scope="scope">
                         {{scope.row.ninetyMoreDaysPercent}}
                       </template>
                     </el-table-column>
                   </el-table-column>

                   <el-table-column  label="持有>180天" align="center">
                     <el-table-column min-width="100" label="数量" align="center">
                       <template slot-scope="scope">
                         {{scope.row.moreDaysNum}}
                       </template>
                     </el-table-column>
                     <el-table-column min-width="100" label="占比" align="center">
                       <template slot-scope="scope">
                         {{scope.row.moreDaysPercent}}
                       </template>
                     </el-table-column>
                   </el-table-column>
                 </el-table>
               </div>
               <div class="pagination-container">
                 <el-pagination
                   background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total, sizes,prev, pager, next,jumper"
                   :current-page.sync="listQuery.pageNum"
                   :page-size="listQuery.pageSize"
                   :page-sizes="[10,15,20,50,100]"
                   :total="count">
                 </el-pagination>
               </div>
             </el-card>
         </div>
         <div class="analys-con" v-show="tab == 2">
           <div class="analys-con-left">
             <div id="myChart2" :style="{'height':'400px'}" ></div>
           </div>
           <div class="analys-con-right">
             <el-card class="box-card" >
               <el-menu :default-active="listQuery2.tab" class="el-menu-demo" mode="horizontal" @select="selectTab2">
                 <el-menu-item index="my">我负责的</el-menu-item>
                 <el-menu-item index="share">共享（师徒）</el-menu-item>
                 <el-menu-item index="department">部门（军团）</el-menu-item>
                 <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
               </el-menu>
               <el-form :inline="true" :model="listQuery2" size="mini" label-width="50px" style="margin-top:20px;" v-if="listQuery2.tab != 'my'">
                 <el-form-item label="业务员：" label-width="70px" >
                   <el-select style="width:100px" v-model="listQuery2.userId" filterable clearable>
                     <el-option
                       v-for="item in userOptionList"
                       :key="item.userId"
                       :label="item.userName"
                       :value="item.userId">
                     </el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label-width="0px">
                   <el-button
                     @click="getList2()"
                     type="primary">
                     查询
                   </el-button>
                   <el-button
                     :loading="btnloading2"
                     v-if="listQuery2.tab == 'all'"
                     @click="downloadExcel(2)"
                     type="primary">
                     导出
                   </el-button>
                 </el-form-item>
               </el-form>
               <!--数据列表-->
               <div class="table-container">
                 <el-table
                   ref="multipleTable2"
                   v-loading="listLoading2"
                   :data="tableData2"
                   border
                   style="width: 100%; margin-top: 20px">

                   <el-table-column align="center" label="业务员" min-width="100">
                     <template slot-scope="scope">
                       {{scope.row.userName}}
                     </template>
                   </el-table-column>
                   <el-table-column label="客户总量" align="center" min-width="100">
                     <template slot-scope="scope">
                          {{scope.row.goodsLineNum}}
                     </template>
                   </el-table-column>
                   <el-table-column :label="item.cddValue" align="center" v-for="(item,index) in goodsLineList" :key="index">
                     <el-table-column
                       align="center"
                       label="数量"
                       width="80">
                           <template slot-scope="scope">
                              {{scope.row[item.cddValue]['num']}}
                            </template>
                       </el-table-column>
                       <el-table-column width="80" label="占比" align="center">
                         <template slot-scope="scope">
                           {{scope.row[item.cddValue]['proportion']}}
                         </template>
                       </el-table-column>
                   </el-table-column>
                 </el-table>
               </div>
               <div class="pagination-container">
                 <el-pagination
                   background
                   @size-change="handleSizeChange2"
                   @current-change="handleCurrentChange2"
                   layout="total, sizes,prev, pager, next,jumper"
                   :current-page.sync="listQuery2.pageNum"
                   :page-size="listQuery2.pageSize"
                   :page-sizes="[10,15,20,50,100]"
                   :total="count2">
                 </el-pagination>
               </div>
             </el-card>
           </div>
         </div>
         <div class="analys-con" v-show="tab == 3">
             <el-card class="box-card" >
               <el-menu :default-active="listQuery3.tab" class="el-menu-demo" mode="horizontal" @select="selectTab3">
                 <el-menu-item index="my">我负责的</el-menu-item>
                 <el-menu-item index="share">共享（师徒）</el-menu-item>
                 <el-menu-item index="department">部门（军团）</el-menu-item>
                 <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
               </el-menu>
               <el-form :inline="true" :model="listQuery3" size="mini" label-width="50px" style="margin-top:20px;">
                 <el-form-item label="业务员：" label-width="70px" v-if="listQuery3.tab != 'my'">
                   <el-select style="width:100px" v-model="listQuery3.userId" filterable clearable>
                     <el-option
                       v-for="item in userOptionList"
                       :key="item.userId"
                       :label="item.userName"
                       :value="item.userId">
                     </el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="进阶时间：" label-width="100px">
                   <el-date-picker
                     value-format="yyyy-MM"
                     v-model="listQuery3.summaryMonth"
                     type="monthrange"
                     range-separator="至"
                     start-placeholder="开始月份"
                     end-placeholder="结束月份">
                   </el-date-picker>
                 </el-form-item>
                 <el-form-item label-width="0px">
                   <el-button
                     @click="handleSearchList3()"
                     type="primary">
                     查询
                   </el-button>
                   <el-button
                     :loading="btnloading3"
                     v-if="listQuery3.tab == 'all'"
                     @click="downloadExcel(3)"
                     type="primary">
                     导出
                   </el-button>
                 </el-form-item>
               </el-form>
               <!--数据列表-->
               <div class="table-container">
                 <el-table
                   ref="multipleTable3"
                   v-loading="listLoading3"
                   :data="tableData3"
                   border
                   style="width: 100%; margin-top: 20px">
                   <el-table-column align="center" label="时间" min-width="100">
                     <template slot-scope="scope">
                          {{scope.row.summaryMonth}}
                     </template>
                   </el-table-column>

                   <el-table-column align="center" label="业务员" min-width="100">
                     <template slot-scope="scope">
                       {{scope.row.userName}}
                     </template>
                   </el-table-column>
                   <el-table-column label="客户总量" align="center" min-width="100">
                     <template slot-scope="scope">
                       {{scope.row.customerNum}}
                     </template>
                   </el-table-column>
                   <el-table-column label="产品线总量" align="center" min-width="100">
                     <template slot-scope="scope">
                       {{scope.row.goodsLineNum}}
                     </template>
                   </el-table-column>
                   <el-table-column label="产品线进阶目标数量" align="center" min-width="100">
                     <template slot-scope="scope">

                     </template>
                   </el-table-column>
                   <el-table-column label="进阶目标完成数量" align="center" min-width="100">
                     <template slot-scope="scope">

                     </template>
                   </el-table-column>
                   <el-table-column min-width="100" label="月目标跟进次数" align="center">
                     <template slot-scope="scope">
                       {{scope.row.trackingTargetNum}}
                     </template>
                   </el-table-column>
                   <el-table-column min-width="100" label="月实际跟进次数" align="center">
                     <template slot-scope="scope">
                       {{scope.row.trackingActualNum}}
                     </template>
                   </el-table-column>
                   <el-table-column min-width="100" label="月有效跟进次数" align="center">
                     <template slot-scope="scope">
                       {{scope.row.trackingValidNum}}
                     </template>
                   </el-table-column>
                   <el-table-column min-width="100" label="平均跟进次数" align="center">
                     <template slot-scope="scope">
                       {{scope.row.averageTrackingNum}}
                     </template>
                   </el-table-column>
                 </el-table>
               </div>
               <div class="pagination-container">
                 <el-pagination
                   background
                   @size-change="handleSizeChange3"
                   @current-change="handleCurrentChange3"
                   layout="total, sizes,prev, pager, next,jumper"
                   :current-page.sync="listQuery3.pageNum"
                   :page-size="listQuery3.pageSize"
                   :page-sizes="[10,15,20,50,100]"
                   :total="count3">
                 </el-pagination>
               </div>
             </el-card>
         </div>
         <div class="analys-con" v-show="tab == 4">
           <el-card class="box-card" >
             <el-menu :default-active="listQuery4.tab" class="el-menu-demo" mode="horizontal" @select="selectTab4">
               <el-menu-item index="my">我负责的</el-menu-item>
               <el-menu-item index="share">共享（师徒）</el-menu-item>
               <el-menu-item index="department">部门（军团）</el-menu-item>
               <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
             </el-menu>
             <el-form :inline="true" :model="listQuery4" size="mini" label-width="50px" style="margin-top:20px;" >
               <el-form-item label="业务员：" label-width="70px"  v-if="listQuery4.tab != 'my'">
                 <el-select style="width:100px" v-model="listQuery4.userId" filterable clearable>
                   <el-option
                     v-for="item in userOptionList"
                     :key="item.userId"
                     :label="item.userName"
                     :value="item.userId">
                   </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="军团：" label-width="70px"  v-if="listQuery4.tab == 'all'">
                   <el-input v-model="listQuery4.departmentName"></el-input>
               </el-form-item>
               <el-form-item label="时间：" label-width="100px">
                 <el-date-picker
                   value-format="yyyy-MM"
                   v-model="listQuery4.ugmMonth"
                   type="month"
                   placeholder="选择月">
                 </el-date-picker>
               </el-form-item>
               <el-form-item label-width="0px">
                 <el-button
                   @click="handleSearchList4()"
                   type="primary">
                   查询
                 </el-button>
                 <el-button
                   :loading="btnloading4"
                   v-if="listQuery4.tab == 'all'"
                   @click="downloadExcel(4)"
                   type="primary">
                   导出
                 </el-button>
               </el-form-item>
             </el-form>
             <!--数据列表-->
             <div class="table-container">
               <el-table
                 ref="multipleTable4"
                 v-loading="listLoading4"
                 :data="tableData4"
                 border
                 style="width: 100%; margin-top: 20px">
                 <el-table-column align="center" label="月份" min-width="100">
                   <template slot-scope="scope">
                      {{scope.row.ugmMonth}}
                   </template>
                 </el-table-column>
                 <el-table-column label="客户编号" align="center" min-width="200">
                   <template slot-scope="scope">
                     <div>{{scope.row.customerNumber }}</div>
                     <!--是否有权限-->
                     <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
                   </template>
                 </el-table-column>
                 <el-table-column label="潜在等级" align="center" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.customerPotential}}
                   </template>
                 </el-table-column>
                 <el-table-column label="主客户" align="center" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.isMainCustomer == 1 ? '是' : '不是'}}
                   </template>
                 </el-table-column>
                 <el-table-column label="子客户数量" align="center" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.relationCount}}
                   </template>
                 </el-table-column>
                 <el-table-column label="产品线" align="center" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.goodsLineName}}
                   </template>
                 </el-table-column>
                 <el-table-column align="center" label="业务员" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.userName}}
                   </template>
                 </el-table-column>
                 <el-table-column align="center" label="军团" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.departmentName}}
                   </template>
                 </el-table-column>
                 <el-table-column align="center" label="负责时间" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.cglMyChargeTime}}
                   </template>
                 </el-table-column>
                 <el-table-column align="center" label="初始阶段" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.initialDevelopState}}
                   </template>
                 </el-table-column>
                 <el-table-column align="center" label="本月目标阶段" min-width="100">
                   <template slot-scope="scope">
                     {{scope.row.targetDevelopState}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="当前阶段" align="center">
                   <template slot-scope="scope">
                     {{scope.row.currentDevelopState}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月目标跟进次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.targetTrackingNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月跟进次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.thisMonthTrackingNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月有效跟进次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.validTrackingNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="总跟进次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.allTrackingNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月目标设置时间" align="center">
                   <template slot-scope="scope">
                        {{scope.row.targetSetTime}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="寻找关建人完成时间" align="center">
                   <template slot-scope="scope">
                     {{scope.row.peopleActualDate}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="挖需求完成时间" align="center">
                   <template slot-scope="scope">
                     {{scope.row.demandActualDate}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="建立粘度完成时间" align="center">
                   <template slot-scope="scope">
                     {{scope.row.relationActualDate}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="促成交完成时间" align="center">
                   <template slot-scope="scope">
                     {{scope.row.dealActualDate}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月进阶步数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.advancedNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月完成进阶步数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.authAdvancedNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="本月成交次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.allNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="产品线成交总次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.goodsLineNum}}
                   </template>
                 </el-table-column>
                 <el-table-column min-width="100" label="客户成交总次数" align="center">
                   <template slot-scope="scope">
                     {{scope.row.customerNum}}
                   </template>
                 </el-table-column>
               </el-table>
             </div>
             <div class="pagination-container">
               <el-pagination
                 background
                 @size-change="handleSizeChange4"
                 @current-change="handleCurrentChange4"
                 layout="total, sizes,prev, pager, next,jumper"
                 :current-page.sync="listQuery4.pageNum"
                 :page-size="listQuery4.pageSize"
                 :page-sizes="[10,15,20,50,100]"
                 :total="count4">
               </el-pagination>
             </div>
           </el-card>
         </div>

       </el-card>


     </div>

  </div>
</template>

<script>
const defaultListQuery={
  "userId": "",
  "tab": "my",
  "pageNum": 1,
  "pageSize": 10
};

const defaultListQuery2={
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  "pageNum"    : 1,
  "pageSize"   : 10,
};

const defaultListQuery3={
  summaryMonth:[],
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  "pageNum"    : 1,
  "pageSize"   : 10,
};

const defaultListQuery4={
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  ugmMonth:'',
  departmentName:'',
  "pageNum"    : 1,
  "pageSize"   : 10,
};

const defaultListQuery5={
  summaryMonth:[],
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  "pageNum"    : 1,
  "pageSize"   : 10,
};
    import {agentProcessBillList,getOrderUsersList,getCustomerSetting} from '@/api/partner'
    import yearPicker from '@/views/components/yearPicker'
    import {developCustomerGoodsLine,customerGoodsLineAnalysis,haveGoodsLineDays,trackingAnalysis,trackingReport} from '@/api/company'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'

    export default {
        name: "saleReport",
        data(){
            return{
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              roles:store.getters.roles ? store.getters.roles : [],
              userOptionList:[],

              listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
              tableData2: [],
              count2: 0,
              listLoading2: false,

              listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
              tableData3: [],
              count3: 0,
              listLoading3: false,

              listQuery4: JSON.parse(JSON.stringify(defaultListQuery4)),
              tableData4: [],
              count4: 0,
              listLoading4: false,

              listQuery5: JSON.parse(JSON.stringify(defaultListQuery5)),
              tableData5: [],
              count5: 0,
              listLoading5: false,
              tab:'1',
              goodsLineList:[],
              btnloading2:false,
              btnloading3:false,
              btnloading4:false

            }
        },
        components : {yearPicker},
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),
          allCustomerGoodsLineAnalysis(){
            if(this.roles.indexOf("allCustomerGoodsLineAnalysis") != -1){
              return true
            }else{
              return false
            }
          },

        },
        created() {
            this.getUserOptionList()
            this.getCustomerSettingList();
            this.handleSearchList()
        },
        filters: {

        },
        methods:{
          //获取客户配置
          getCustomerSettingList(){
            getCustomerSetting().then((res)=>{
              res.forEach((el)=>{
                if(el.cdtCode == 'goods_line'){
                  this.goodsLineList = el.data
                }
              });
            })
          },
          //下载excle
          downloadExcel(type){
            let params,fn
            if(type == 1){
               params = JSON.parse(JSON.stringify(this.listQuery));
              fn = developCustomerGoodsLine
            }else if(type == 2){
               params = JSON.parse(JSON.stringify(this.listQuery2));
               this.btnloading2 = true
               fn = developCustomerGoodsLine
            }else if(type == 3){
               this.btnloading3 = true
               params = JSON.parse(JSON.stringify(this.listQuery3));
              fn = trackingReport
            }else if(type == 4){
               params = JSON.parse(JSON.stringify(this.listQuery4));
              fn = trackingAnalysis
              this.btnloading4 = true;
            }
            params.export = 1;
            delete params.pageSize;
            delete params.pageNum;
            fn(params).then((res)=>{
              this.btnloading2 = false;
              this.btnloading3 = false;
              this.btnloading4 = false;
              require.ensure([], () => {
                const { export_json_to_excel } = require('sheet/Export2Excel');
                const tHeader = res.title;
                const filterVal = res.columns;
                const list = res.list;
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, res.fileName);
              })
            }).catch(()=>{
              this.btnloading2 = false;
              this.btnloading3 = false;
              this.btnloading4 = false;
            })
          },

          //下载表格数据格式化
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
          },

          selectTab(key){
              this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
              this.listQuery.tab = key;
              this.handleSearchList();
          },
          selectTab2(key){
            this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery2))
            this.listQuery2.tab = key;
            this.handleSearchList2()
          },
          selectTab3(key){
            this.listQuery3 = JSON.parse(JSON.stringify(defaultListQuery3))
            this.listQuery3.tab = key;
            this.handleSearchList3()
          },
          selectTab4(key){
            this.listQuery4 = JSON.parse(JSON.stringify(defaultListQuery4))
            this.listQuery4.tab = key;
            this.handleSearchList4()
          },

          //获取列表
          getList2() {
            this.listLoading2 = true;
            developCustomerGoodsLine(this.listQuery2).then(response => {
              this.tableData2 = response.list;
              this.count2 = response.count;
              this.listLoading2 = false;
            }).catch(()=>{
              this.listLoading2 = false;
            });
          },

          handleSizeChange2(val){
            this.listQuery2.pageNum = 1;
            this.listQuery2.pageSize = val;
            this.getList2();
          },
          handleCurrentChange2(val){
            this.listQuery2.pageNum = val;
            this.getList2();
          },

          handleSearchList2(){
            this.listQuery2.pageNum = 1;
            this.getList2();
            customerGoodsLineAnalysis(this.listQuery2).then((res)=>{
              this.draw2(res)
            })
          },

          //获取列表
          getList3() {
            this.listLoading3 = true;
            trackingReport(this.listQuery3).then(response => {
              this.tableData3 = response.list;
              this.count3 = response.count;
              this.listLoading3 = false;
            }).catch(()=>{
              this.listLoading3 = false;
            });
          },

          handleSizeChange3(val){
            this.listQuery3.pageNum = 1;
            this.listQuery3.pageSize = val;
            this.getList3();
          },
          handleCurrentChange3(val){
            this.listQuery3.pageNum = val;
            this.getList3();
          },

          handleSearchList3(){
            this.listQuery3.pageNum = 1;
            this.getList3();
          },

          //获取列表
          getList4() {
            this.listLoading4 = true;
            trackingAnalysis(this.listQuery4).then(response => {
              this.tableData4 = response.list;
              this.count4 = response.count;
              this.listLoading4 = false;
            }).catch(()=>{
              this.listLoading4 = false;
            });
          },

          handleSizeChange4(val){
            this.listQuery4.pageNum = 1;
            this.listQuery4.pageSize = val;
            this.getList4();
          },
          handleCurrentChange4(val){
            this.listQuery4.pageNum = val;
            this.getList4();
          },

          handleSearchList4(){
            this.listQuery4.pageNum = 1;
            this.getList4();
          },



          changeTab(key){
            this.tab = key;
            if(this.tab == 1){
              this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
              this.handleSearchList()
            }else if(this.tab == 2){
              this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery2))
              this.handleSearchList2()
            }else if(this.tab == 3){
              this.listQuery3 = JSON.parse(JSON.stringify(defaultListQuery3))
              this.handleSearchList3()
            }else if(this.tab == 4){
              this.listQuery4 = JSON.parse(JSON.stringify(defaultListQuery4))
              this.handleSearchList4()
            }
          },


          //画客户产品线
          draw2(data){
            let myChart = this.$echarts.init(document.getElementById('myChart2'));
            // 绘制图表
            myChart.setOption({
              title: {
                text: '客户产品线分析',
                left: 'center',
                top:'90%',
              },
              yAxis: [{
                show:false,// 是否显示坐标轴中的y轴
              }],
              xAxis: [{
                show:false,// 是否显示坐标轴中的x轴
              }],
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient:"vertical",
                left: 'right'
              },
              series: [
                {
                  name: '客户产品线',
                  type: 'pie',
                  radius: '50%',
                  data: data,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  center:["40%", "50%"],
                }
              ]
            });
          },

          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
              this.userOptionList = res;
            })
          },
          updateStatisticYear(val){
            console.log("val",val)
          },

          handleSizeChange(val){
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
          },
          handleCurrentChange(val){
            this.listQuery.pageNum = val;
            this.getList();
          },

          handleSearchList(){
            this.listQuery.pageNum = 1;
            this.getList();
          },

          //获取列表
          getList() {
            this.listLoading = true;
            haveGoodsLineDays(this.listQuery).then(response => {
              this.tableData = response.list;
              this.count = response.count;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            });
          },

        },
    }
</script>

<style  lang="scss">
  .analys-con{
    overflow: hidden;
  }
  .analys-con-left{
    width:400px;
    float:left;
    padding-top:50px;
  }
  .analys-con-right{
    width:calc(100% - 400px);
    float:left;
    padding-left:20px;
  }
  .box-card .el-card__header{
    //padding:0 !important;
  }
</style>
